<template>
    <div>
        <!-- 头部 -->
        <v-top></v-top>
        <v-banner></v-banner>
        <div class="load">
            <div class="max">
                <ul>
                    <li>位置</li>
                    <li @click="go('/')">首页</li>
                    <li @click="go('/bulletinList')">招标公告</li>
                    <li>
                        {{ tenderAnnouncementDetail.bidingName }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="topTitle max">
            {{ tenderAnnouncementDetail.bidingName }}
        </div>
        <div class="max container_cont">
            <div class="content">
                <div class="content-box-1" id="content-box-1">
                    <div><div class="protect" id="noticeArea">
                        <meta http-equiv="content-type" content="text/html;charset=utf-8">
                        <p data-v-6b13d514=""></p>

                        <div style="border: 1px solid black;padding: 12px;border-collapse:collapse;line-height: 28px;width: 98%;margin: 10px auto">
                            <h6><strong>
                                项目概况
                            </strong>
                            </h6>
                            <p>
                                {{ tenderAnnouncementDetail.bidingSurvey }}
                            </p>
                        </div>
                        <h4><strong>一、项目基本情况</strong></h4>
                        <p>项目编号：{{ tenderAnnouncementDetail.bidingNumber }}</p>
                        <p>项目名称：{{ tenderAnnouncementDetail.bidingName }}</p>
                        <p>采购方式：{{ tenderAnnouncementDetail.bidingWay }}</p>
                        <p>预算金额：{{ tenderAnnouncementDetail.bidingAmount}}</p>
                        <p>采购需求：</p>
                        <div class="innercontent">
                            <table width="100%" border="1" cellspacing="0">
                                <thead>
                                <tr style="height:36.4pt">
                                    <th style="width:80px;">编号</th>
                                    <th style="width:300px;">名称</th>
                                    <th style="width:300px;">品牌</th>
                                    <th style="width:100px;">型号</th>
                                    <th style="width:200px;">单位</th>
                                    <th style="width:120px;">数量</th>
                                    <th style="width:120px;">单价</th>
                                    <th style="width:120px;">总额</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(procurementDemand, index) in tenderAnnouncementDetail.procurementDemandList" :key="index">
                                    <td>{{ index+1 }}</td>
                                    <td>{{ procurementDemand.name }}</td>
                                    <td>{{ procurementDemand.brand }}</td>
                                    <td>{{ procurementDemand.model }}</td>
                                    <td>{{ procurementDemand.unit }}</td>
                                    <td>{{ procurementDemand.amount }}</td>
                                    <td>{{ procurementDemand.unitPrice }}</td>
                                    <td>{{ procurementDemand.total }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <h4><strong>二、申请人的资格要求：</strong></h4>
                        <p v-for="(qualification, index) in tenderAnnouncementDetail.qualificationList" :key="index">{{ qualification.qualification }}</p>
                        <!--`<p>2.落实政府采购政策需满足的资格要求：-->
                        <!--    <span>无。</span>-->
                        <!--</p>`-->
                        <p></p>
                        <h4><strong>三、开标</strong></h4>
                        <p>结束时间：{{ tenderAnnouncementDetail.bidOpenTime }}</p>
                        <p>开启时间：{{ tenderAnnouncementDetail.bidShutTime }}</p>
                        <h4><strong>四、公告期限</strong></h4>
                        <p>{{ tenderAnnouncementDetail.noticePeriod }}</p>
                        <h4><strong>五、其他补充事宜</strong></h4>
                        <p v-for="(otherSupple, index) in tenderAnnouncementDetail.otherSuppleList" :key="index">{{ otherSupple.title }}</p>
                        <h4><strong>六、凡对本次采购提出询问，请按以下方式联系</strong></h4>
                        <div class="innercontent">
                            <h6>1.釆购人信息</h6>
                            <p>名称：{{ tenderAnnouncementDetail.purchaseName }}</p>
                            <p>地址：{{ tenderAnnouncementDetail.purchaseAddr }}</p>
                            <p>联系方式：{{ tenderAnnouncementDetail.purchasePhone }}</p>
                            <h6>2.项目联系方式 </h6>
                            <p>项目联系人：{{ tenderAnnouncementDetail.projectName }}</p>
                            <p>电话：{{ tenderAnnouncementDetail.projectPhone }}</p>
                        </div>
                        <p style="text-align: right; ">{{ tenderAnnouncementDetail.company }}</p>
                    </div><div>
                        <span style="margin-left: 4px;">相关附件：</span>
                        <br>
                        <div style="margin-left: 22px;" v-for="(otherFile, index) in tenderAnnouncementDetail.otherFileList" :key="index">
                            <a :href="otherFile.file">{{ otherFile.title }}</a>
                        </div>
                    </div></div>
                </div>
            </div>

            <div class="sidebar">
                <ul :class="navBarFixed === true ? 'navBarFixed' : ''">
                    <div class="baoming" @click="visible = true">我要报名</div>
                    <div class="timeline">
                        <div class="title">时间汇总</div>
                        <div class="dotbox">
                            <div class="dot">
                                <h4>报名时间</h4>
                                <div>
                                    开始：{{ tenderAnnouncementDetail.bidOpenTime }}<br/>
                                    结束：{{ tenderAnnouncementDetail.bidShutTime }}
                                </div>
                            </div>
                            <div class="dot">
                                <h4>文件下载时间</h4>
                                <div>
                                    开始：{{ tenderAnnouncementDetail.createTime }}<br/>
                                    结束：{{ tenderAnnouncementDetail.bidShutTime }}
                                </div>
                            </div>
                            <div class="dot">
                                <h4>投标时间</h4>
                                <div>
                                    开始：{{ tenderAnnouncementDetail.bidOpenTime }}<br/>
                                    结束：{{ tenderAnnouncementDetail.bidShutTime }}
                                </div>
                            </div>
                            <div class="dot">
                                <h4>开标时间</h4>
                                <div>{{ tenderAnnouncementDetail.createTime }}</div>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
        <a-modal v-model:visible="visible" :confirmLoading="confirmLoading" @cancel="closeModal" title="报名" okText="报名" cancelText="取消" @ok="signUp">
            <a-form :model="signUpData" ref="formRef" :label-col="{span: 4}">
                <a-form-item label="联系人" name="name" :rules="{message: '必填', required: true}">
                    <a-input v-model:value="signUpData.name" />
                </a-form-item>
                <a-form-item label="联系电话" name="phone" :rules="{message: '请输入正确的手机号', required: true, min: 11, max: 11}">
                    <a-input v-model:value="signUpData.phone" :maxLength="11" />
                </a-form-item>
                <a-form-item label="联系地址" name="address" :rules="{message: '必填', required: true}">
                    <a-input v-model:value="signUpData.address" />
                </a-form-item>
                <a-form-item label="邮箱" name="email" :rules="{message: '必填', required: true}">
                    <a-input v-model:value="signUpData.email" />
                </a-form-item>
                <a-form-item label="公司名称" name="company" :rules="{message: '必填', required: true}">
                    <a-input v-model:value="signUpData.company" />
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 底部 -->
        <v-footer></v-footer>
    </div>
</template>

<script>
    import footer from "@/components/foot";
    import top from "@/components/top";
    import banner from "@/components/banner";
    // import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
    import {defineComponent, reactive, toRefs} from "vue";
    import {getTenderAnnouncement, signUpAdd} from "../request/api/sys";

    export default defineComponent({
        components: {
            "v-footer": footer,
            "v-top": top,
            "v-banner": banner,
        },
        data() {
            return {
                visible: false,
                confirmLoading: false,
                tenderAnnouncementDetail: {},
                signUpData: {
                    bidingId: this.$route.params.bidingId
                } // 报名数据
            }
        },
        mounted() {
            window.addEventListener("scroll", this.watchScroll);
            this.getTenderAnnouncementDetail(this.$route.params.bidingId)
        },
        methods: {
            signUp () {
                this.confirmLoading = true
                this.$refs.formRef.validate().then(res => {
                    signUpAdd(this.signUpData).then(res => {
                        this.$message.success('报名成功')
                        this.closeModal()
                    })
                }).catch(() => {
                    this.confirmLoading = false
                })
            },
            closeModal () {
                this.signUpData = {
                    bidingId: this.$route.params.bidingId
                }
                this.confirmLoading = false
                this.visible = false
            },
            getTenderAnnouncementDetail (bidingId) {
                getTenderAnnouncement({
                    modal: 2,
                    bidingId
                }).then(res => {
                    this.tenderAnnouncementDetail = res.rows[0]
                })
            }
        },
        setup() {
            const state = reactive({
                navBarFixed: false,
            });

            function go(path) {
                this.$router.push({
                    path: path,
                    query: {
                        // id: id
                    },
                });
            }

            // 滚动距离
            function watchScroll() {
                var scrollTop =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;

                var scrollBottom =
                    document.documentElement.scrollHeight -
                    document.documentElement.scrollTop -
                    document.documentElement.clientHeight;

                //  当滚动超过 90 时，实现吸顶效果
                if (scrollTop > 800) {
                    state.navBarFixed = true;
                } else {
                    state.navBarFixed = false;
                }
                // console.log(scrollTop);
                // console.log(this.navBarFixed);
            }

            return {
                ...toRefs(state),
                go,
                watchScroll,
            };
        },
    });
</script>

<style scoped>
    a {color: #337ab7;text-decoration: none;transition: 0.5s;background-color: transparent;}
    a:focus,a:hover {text-decoration: none;color: #23527c;}
    a:focus {outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
    a:active, a:hover {outline: 0;}
    /*网页规范：
      宋体，2.5行高，默认16号字
      大标题用h2标签，字号为24号加粗
      一级标题用h3标签，字号为18号加粗
      二级标题用h4标签，字号为16号加粗
      三级标题用h5标签，字号为16号加粗，首行缩进28px
      段落字号16px，首行缩进28px
      普通文字为16号字体
      表格标题为加粗，表格字号为16号字体，高度为32px，表格外部上下间距10px，左右居中；单元格内部上下间距5px，左右间距8px；
      标题加粗，自己改为<strong></strong>或者加样式。
      标题段落间距为8px
   */
    #noticeArea { line-height:2.5; font-size: 16px;text-align: justify;font-family: '宋体';}
    #noticeArea h1, #noticeArea h2, #noticeArea h3, #noticeArea h4, #noticeArea h5, #noticeArea h6{ line-height: 2; }
    #noticeArea  *{padding:0; margin:0;}
    #noticeArea  .focuscontent{ color:#337ab7;}
    #noticeArea  h2{font-size: 24px; text-align: center; margin-bottom: 20px;}
    #noticeArea  h3{font-size: 18px;font-weight: normal;}
    #noticeArea  h4{font-size: 16px;font-weight: normal;}
    #noticeArea  h5{text-indent: 32px;font-size: 16px;font-weight: normal;}
    #noticeArea  h6{font-size: 16px;font-weight: normal;}
    #noticeArea  pre{font-size: 16px;background: none;border: none;line-height: 2.5;}
    #noticeArea  p{ text-indent: 32px; font-size: 16px;}
    #noticeArea  table{font-size: 16px;border-collapse: collapse; border-spacing: 0; width:100%;margin:10px auto;word-break: normal; line-height: 24px;}
    #noticeArea  table tr td{border-collapse: collapse; border:1px solid #333;text-align: center;padding: 5px 8px;}
    #noticeArea  table tr th{ font-weight: bold; text-align: center; border:1px solid #333;padding: 5px 8px;}
    #noticeArea  table tr{
        height: 32px;}
    #noticeArea .innercontent{padding-left: 32px;}
    #noticeArea .cleardom{clear: both;height: 0;line-height: 0;overflow: hidden;}
    #noticeArea .alignright{ text-align: right;word-break: normal;}
    @media print {
        /*打印规范：
           宋体，1.8行高
           大标题用h2标签，字号为34号加粗,对应WORD为二号
           一级标题用h3标签，字号为24号加粗，对应WORD为小三号
           二级标题用h4标签，字号为21号加粗。对应WORD为四号
           三级标题用h5标签，字号为18号加粗。对应WORD为小四号，首行缩进28px
           段落普通文字为18号字体，对应WORD为小四号，首行缩进28px
           普通文字为18号字体，对应WORD为小四号
           表格标题为加粗，表格字号为16号字体，高度为32px；考虑内容多，用16号，对应WORD为五号；表格外部上下间距10px，左右居中；单元格内部上下间距5px，左右间距8px
           标题加粗，自己改为<strong></strong>或者加样式。
        */
        #noticeArea { font-family: '宋体'; line-height:1.8; font-size: 18px;text-align: justify;}
        #noticeArea  *{padding:0; margin:0;}
        #noticeArea h1, #noticeArea h2, #noticeArea h3, #noticeArea h4, #noticeArea h5, #noticeArea h6{ line-height: 2; }
        #noticeArea  .focuscontent{ color:#337ab7;}
        #noticeArea  h2{font-size: 34px; text-align: center; margin-bottom: 25px;font-family: SimHei; }
        #noticeArea  h3{font-size: 24px; font-weight: normal;}
        #noticeArea  h4{font-size: 21px; font-weight: normal;}
        #noticeArea  h5{font-size: 18px; text-indent: 36px; font-weight: normal;}
        #noticeArea  h6{font-size: 16px;font-weight: normal;}
        #noticeArea  pre{font-size: 18px;background: none;border: none;line-height: 1.8;}
        #noticeArea  p{ text-indent: 36px; font-size: 18px;}
        #noticeArea  table{font-size: 16px;border-collapse: collapse; border-spacing: 0; width:100%;margin:15px auto; word-break: normal; line-height: 24px;}
        #noticeArea  table tr td{border-collapse: collapse; border:1px solid #333;text-align: center;padding: 2px 6px; }
        #noticeArea  table tr th{ font-weight: bold; text-align: center;padding: 2px 6px;}
        #noticeArea  table tr{
            height: 32px;}
        #noticeArea .innercontent{padding-left: 32px;}
        #noticeArea .cleardom{clear: both;height: 0;line-height: 0;overflow: hidden;}
        #noticeArea .alignright{ text-align: right;word-break: normal;}
    }
</style>
